<template>
	<view class="home">
		<view class="bg-1a padding-lr-25 radius-40 flex align-center justify-around">
			<view :class="datetime==item.date?'choseDate':''" class="flex align-center flex-direction text-ff padding-tb-35 padding-lr-10" v-for="(item,index) in tablist" :key="index"
				@click="getTlist(item.available_times,item.date)">
				<view class="text-32">{{item.weekday}}</view>
				<view class="text-24 text-66">{{item.date}}</view>
			</view>
		</view>
		<view class="margin-top-50 flex align-center flex-wrap">
			<view class="tmr" :class="start_index>index?'timebtn_d':start_time==item.time?'timebtn_active':end_time==item.time?'timebtn_active':'timebtn'"
				v-for="(item,index) in timelist" :key="index" @click="choseTime(item.time,index,item.num)">
				{{item.time}}
				<view class="text-24 text-ff" v-if="start_time==item.time">开始时间</view>
				<view class="text-24 text-ff" v-if="end_time==item.time">结束时间</view>
			</view>
		</view>
		<view class="subbtn" @click="subTime">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				tablist: [],
				timelist: [],
				start_time: "",
				start_index:-1,
				end_time: "",
				datetime:"",
				snum:"",
				enum:""
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onReady() {
			this.rq.getData('Reservations/reservation_time', {
				shop_id: this.id
			}).then(res => {
				if (res.code == 1) {
					this.tablist = res.data
					this.datetime = res.data[0].date
					this.timelist = res.data[0].available_times
				}
			})
		},
		methods: {
			getTlist(available_times,date) {
				this.timelist = available_times
				this.datetime = date
				this.start_time = ''
				this.start_index = ''
				this.end_time = ''
			},
			choseTime(time, i,num) {
				if(this.start_index>i){
					return
				}
				if (this.start_time == '') {
					this.start_time = time
					this.snum = num
					this.start_index = i
				} else {
					if (this.start_time == time) {
						this.start_time = ''
						this.start_index = ''
						this.end_time = ''
					} else {
						this.end_time = time
						this.enum = num
					}
				}
			},
			subTime() {
				if (this.start_time == '') {
					this.cn.alert('请选择开始时间')
					return false
				}
				if (this.end_time == '') {
					this.cn.alert('请选择结束时间')
					return false
				}
				uni.setStorageSync('datetime', this.datetime)
				uni.setStorageSync('start_time', this.start_time)
				uni.setStorageSync('end_time', this.end_time)
				var num = Number(this.enum )- Number(this.snum)
				console.log(num)
				uni.setStorageSync('num', num)
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.choseDate{
		background:#ffffff;
		color:#000;
	}
	
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 20rpx 30rpx;
	}
	
	.timebtn {
		width: 160rpx;
		height: 94rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 94rpx;
		font-size: 32rpx;
	}
	
	.timebtn_d{
		width: 160rpx;
		height: 94rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 94rpx;
		font-size: 32rpx;
		color: #999999;
	}

	.timebtn_active {
		width: 160rpx;
		height: 94rpx;
		background: #101010;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		color: #fff;
	}

	.tmr {
		margin-right: 16rpx;
		margin-bottom: 20rpx;
	}

	.tmr:nth-child(4n) {
		margin-right: 0;
	}

	.subbtn {
		width: 690rpx;
		height: 88rpx;
		background: #101010;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		position: fixed;
		bottom: 132rpx;
		left: 30rpx;
		right: 30rpx;
	}
</style>